<template>
  <div class="login-container">
    <!-- logo -->
    <div class="login-box">
      <div class="logo-containe mb-3">
        <logo-component/>
      </div>
      <el-card class="box-card">
        <el-form
          ref="loginFormRef"
          :rules="loginRules"
          :model="loginData"
          class="login-form"
        >
          <div class="flex text-black items-center py-4">
            <div class="text-2xl text-center title">
              欢迎登录系统
              <div class="bottom-line"></div>
            </div>
          </div>
          <div class="login-content">
            <!-- 用户名称 -->
            <el-form-item prop="accountPhone">
              <div class="p-2">
                <svg-icon icon-class="user"/>
              </div>
              <el-input
                ref="username"
                size="large"
                class="d-flex align-items-center"
                v-model="loginData.accountPhone"
                placeholder="请输入账号"
                name="username"
              />
            </el-form-item>

            <el-tooltip
              :disabled="isCapslock === false"
              content="Caps lock is On"
              placement="right"
            >
              <el-form-item prop="accountPassword">
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
                <!-- 密码 -->
                <el-input
                  v-model="loginData.accountPassword"
                  placeholder="请输入密码"
                  :type="passwordVisible === false ? 'password' : 'input'"
                  size="large"
                  name="password"
                  class="d-flex align-items-center"
                  @keyup.native="checkCapslock"
                  @keyup.enter.native="handleLogin"
                />
                <span class="mr-2 d-flex align-items-center" @click="passwordVisible = !passwordVisible">
                <svg-icon
                  :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
                  class="text-gray cursor-pointer"
                />
              </span>
              </el-form-item>
            </el-tooltip>
            <!--          <div class="checkbox">-->
            <!--            <el-form-item>-->
            <!--              <el-checkbox-group v-model="passwordCheckbox">-->
            <!--                <el-checkbox label="记住密码" name="type"/>-->
            <!--              </el-checkbox-group>-->
            <!--            </el-form-item>-->
            <!--          </div>-->

            <el-button
              size="default"
              :loading="loading"
              type="primary"
              class="w-full"
              @click.prevent="handleLogin"
            >登录
            </el-button>
          </div>

          <!-- 账号密码提示 -->
        </el-form>
        <div class="bottom-title">
          <div class="left-line"></div>
          <div class="center-name">欢迎登录系统</div>
          <div class="right-line"></div>
        </div>
      </el-card>
    </div>
    <!-- 重置密码弹框 -->
    <global-message-box
      v-if="isMessageBoxShow"
      @messageBoxSave="messageBoxSave"
      @messageBoxReceive="isMessageBoxShow = false"
    >
      <template #content>
        <div class="messageBoxContent">
          <el-form ref="form" :model="resetForm" :rules="rules">
            <el-form-item prop="onePassword">
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="resetForm.onePassword"
                placeholder="请输入密码"
                :type="resetOnePasswordVisible === false ? 'password' : 'input'"
              />
              <span
                class="mr-2"
                @click="resetOnePasswordVisible = !resetOnePasswordVisible"
              >
                <svg-icon
                  :icon-class="
                    resetOnePasswordVisible === false ? 'eye' : 'eye-open'
                  "
                  class="text-gray cursor-pointer"
                />
              </span>
            </el-form-item>
            <el-form-item prop="twoPassword">
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="resetForm.twoPassword"
                placeholder="请再次确认密码"
                @keyup.enter.native="messageBoxSave"
                :type="resetTwpPasswordVisible === false ? 'password' : 'input'"
              />
              <span
                class="mr-2"
                @click="resetTwpPasswordVisible = !resetTwpPasswordVisible"
              >
                <svg-icon
                  :icon-class="
                    resetTwpPasswordVisible === false ? 'eye' : 'eye-open'
                  "
                  class="text-gray cursor-pointer"
                />
              </span>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </global-message-box>
  </div>
</template>

<script>
  import { passwordValidator } from "./validator"
  import { updateLAccount, updateLAccountAndPwd } from "@/api/userControl/account"
  import logoComponent from "@/components/LoginLogo"

  export default {
    name: "App",
    data() {
      return {
        loading: false,
        isCapslock: false,
        passwordVisible: false,
        resetOnePasswordVisible: false,
        resetTwpPasswordVisible: false,
        isMessageBoxShow: false,
        captchaBase64: "",
        passwordCheckbox: [],
        loginData: {
          accountPhone: 17766429748,
          accountPassword: "123456"
        },
        loginRules: {
          accountName: [{ required: true, trigger: "blur" }],
          accountPassword: [
            { required: true, trigger: "blur", validator: passwordValidator }
          ]
        },
        resetForm: {
          onePassword: "",
          twoPassword: ""
        }, //重置密码form
        rules: {
          onePassword: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
          ],
          twoPassword: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
          ]
        }
      }
    },
    components: {
      logoComponent
    },
    methods: {
      /**
       * 检查输入大小写状态
       */
      checkCapslock(e) {
        const { key } = e
        this.isCapslock = key && key.length === 1 && key >= "A" && key <= "Z"
      },
      handleLogin() {
        this.$refs.loginFormRef.validate((valid) => {
          if (valid) {
            this.loading = true
            this.$store.dispatch("user/login", this.loginData).then((show) => {
              if (show) {
                this.isMessageBoxShow = show
              } else {
                // const query = this.$route.query
                // const redirect = query.redirect ?? "/"
                // todo query参数
                // const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                //     if (cur !== "redirect") {
                //       acc[cur] = query[cur]
                //     }
                //     return acc
                //   }, {})
                // this.$router.push({ path: redirect, query: otherQueryParams })
                this.$router.push({ path: "/userControl/menuControl" })
              }
            }).catch(() => {
              // 验证失败，重新生成验证码
              // getCaptcha();
            })
              .finally(() => {
                this.loading = false
              })
          }
        })
      },
      messageBoxSave() {
        if (this.resetForm.onePassword == this.resetForm.twoPassword) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.loading = true
              updateLAccountAndPwd({
                accountPhone: this.loginData.accountPhone,
                accountPassword: this.resetForm.onePassword
              }).then(res => {
                if (res.status == "200") {
                  // const query = this.$route.query
                  // const redirect = query.redirect ?? "/"
                  //
                  // // todo query参数
                  // const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                  //   if (cur !== "redirect") {
                  //     acc[cur] = query[cur]
                  //   }
                  //   return acc
                  // }, {})
                  //
                  // this.$router.push({ path: redirect, query: otherQueryParams })
                  this.$router.push({ path: "/userControl/menuControl" })
                }
              })
            }
          })
        } else {
          this.$message({
            message: "两次密码输入不一致！",
            type: "warning"
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-container {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    // background-color: #2d3a4b;
    background: url("../../assets/login/login-bg.png") no-repeat;
    background-size: 100% 100%;

    .login-box {
      position: absolute;
      top: 100px;
      right: 149px;
      width: 566px;
      height: 654px;

      .logo-container {
        /*position: absolute;*/
        /*top: 120px;*/
        /*right: 120px;*/
      }

      .box-card {
        /*position: absolute;*/
        /*top: 213px;*/
        /*right: 149px;*/
        width: 566px;
        height: 654px;

        .title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding-bottom: 30px;
          font-size: 22px;
          font-weight: 500;
          color: #4a4a4a;

          .bottom-line {
            width: 42px;
            height: 4px;
            margin-top: 12px;
            background: #3276ff;
          }
        }

        .login-form {
          width: 520px;
          max-width: 100%;
          padding: 80px 0 0;
          margin: 0 auto;
          overflow: hidden;

          .captcha {
            position: absolute;
            top: 0;
            right: 0;

            img {
              width: 120px;
              height: 48px;
              cursor: pointer;
            }
          }
        }

        .login-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .checkbox {
            .el-form-item {
              background: transparent;
              border-radius: 5px;
            }
          }

          .w-full {
            width: 408px;
            height: 53px;
          }
        }

        .bottom-title {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 71px;

          .left-line {
            width: 132px;
            height: 1px;
            background: #d9d9d9;
          }

          .center-name {
            width: 96px;
            height: 24px;
            margin: 0 24px;
            font-size: 16px;
            font-weight: 500;
            color: #4a4a4a;
          }

          .right-line {
            width: 132px;
            height: 1px;
            background: #d9d9d9;
          }
        }
      }
    }



    .messageBoxContent {
      width: 100%;
      height: 100%;

      ::v-deep.el-input__inner {
        color: #989898;
        background: transparent;
        border: 0;
        border-radius: 0;
        caret-color: #989898;

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px transparent inset !important;
          -webkit-text-fill-color: #fff !important;
        }

        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
          transition: color 99999s ease-out, background-color 99999s ease-out;
          transition-delay: 99999s;
        }
      }
    }
  }

  .el-form-item {
    width: 418px;
    // background: rgb(0 0 0 / 10%);
    background: #f1f4f8;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    padding: 0 10px;

    ::v-deep.el-form-item__content {
      display: flex;
    }
  }

  .el-input {
    background: transparent;

    // 子组件 scoped 无效，使用 :deep
    // .el-input__wrapper {
    //   padding: 0;
    //   background: transparent;
    //   box-shadow: none;

    //   .el-input__inner {
    //     color: #989898;
    //     background: transparent;
    //     border: 0;
    //     border-radius: 0;
    //     caret-color: #989898;

    //     &:-webkit-autofill {
    //       box-shadow: 0 0 0 1000px transparent inset !important;
    //       -webkit-text-fill-color: #fff !important;
    //     }

    //     // 设置输入框自动填充的延迟属性
    //     &:-webkit-autofill,
    //     &:-webkit-autofill:hover,
    //     &:-webkit-autofill:focus,
    //     &:-webkit-autofill:active {
    //       transition: color 99999s ease-out, background-color 99999s ease-out;
    //       transition-delay: 99999s;
    //     }
    //   }
    // }
  }

  .login-content {
    ::v-deep.el-input__inner {
      color: #989898;
      background: transparent;
      border: 0;
      border-radius: 0;
      caret-color: #989898;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        transition: color 99999s ease-out, background-color 99999s ease-out;
        transition-delay: 99999s;
      }
    }
  }
</style>
